<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="refererr" content="never">
    <title>Document</title>


</head>

<body>
    <div id="container">
        <header>
            <h1>蜗牛电影在线管理系统</h1>
        </header>
        <main>
            <aside>
                <dl>
                    <dt>电影管理</dt>
                    <dd><a href="#/MoviesAdd">新增电影</a></dd>
                    
                    <!-- <dd><a href="#/MoviesUpdate">修改电影</a></dd> -->
                    <dd><a href="#/MoviesList">电影列表</a></dd>
                </dl>
                <dl>
                    <dt>导演管理</dt>
                    <dd><a href="#/classesAdd">新增导演</a></dd>
                    <dd><a href="#/classesList">导演列表</a></dd>
                </dl>
                <dl>
                    <dt>电影类型管理</dt>
                    <dd><a href="#/headTeachersAdd">新增电影类型</a></dd>
                    <dd><a href="#/headTeachersList">电影类型列表</a></dd>
                </dl>
                <dl>
                    <dt>演员管理</dt>
                    <dd><a href="#/headActorsAdd">新增演员</a></dd>
                    <dd><a href="#/headActorsList">演员列表</a></dd>
                </dl>
                
            </aside>
            <section>
                <!-- 电影列表 -->
                <div class="section-content" id="MoviesList">
                    <h2>电影信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>电影数据</h3>
                            <div>
                                <div class="content-row">
                                    <div class="search-frame">
                                        <select style="width: 60px;">
                                            <option value="name">名称</option>
                                            <option value="actor">演员</option>
                                            <option value="dir">导演</option>
                                            <option value="type">类型</option>
                                        </select>
                                        <input type="text">
                                    </div>
                                </div>

                                <table>
                                    <thead>
                                        <tr>
                                            <th>电影编号</th>
                                            <th>电影名称</th>
                                            <th>演员列表</th>
                                            <th>上映时间</th>
                                            <th>电影导演</th>
                                            <th>电影图片</th>
                                            <th>电影类型</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="MoviesTb">
                                        <tr>
                                            <td>61555e0b1e08a959cd3f4d92</td>
                                            <td>大话西游之大圣娶亲 西遊記大結局之仙履奇緣</td>
                                            <td> 周星驰 / 吴孟达 / 朱茵</td>
                                            <td>1995-02-04(中国香港) 2014-10-24(中国大陆) 2017-04-13(中国大陆重映)</td>
                                            <td>刘镇伟</td>
                                            <td><img width="100" src="assets/p2455050536.jpg"></td>
                                            <td>喜剧</td>
                                            <td>
                                                <a href="#MoviesUpdate">修改</a>
                                                <a href="">删除</a>
                                            </td>                                    
                                        </tr>
                                        <tr>
                                            <td>61555e0b1e08a959cd3f4d92</td>
                                            <td>大话西游之大圣娶亲 西遊記大結局之仙履奇緣</td>
                                            <td> 周星驰 / 吴孟达 / 朱茵</td>
                                            <td>1995-02-04(中国香港) 2014-10-24(中国大陆) 2017-04-13(中国大陆重映)</td>
                                            <td>刘镇伟</td>
                                            <td><img width="100" src="assets/p2455050536.jpg"></td>
                                            <td>喜剧</td>
                                            <td>
                                                <a href="#MoviesUpdate">修改</a>
                                                <a href="">删除</a>
                                            </td>                                    
                                        </tr>
                                        <tr>
                                            <td>61555e0b1e08a959cd3f4d92</td>
                                            <td>大话西游之大圣娶亲 西遊記大結局之仙履奇緣</td>
                                            <td> 周星驰 / 吴孟达 / 朱茵</td>
                                            <td>1995-02-04(中国香港) 2014-10-24(中国大陆) 2017-04-13(中国大陆重映)</td>
                                            <td>刘镇伟</td>
                                            <td><img width="100" src="assets/p2455050536.jpg"></td>
                                            <td>喜剧</td>
                                            <td>
                                                <a href="#MoviesUpdate">修改</a>
                                                <a href="">删除</a>
                                            </td>                                    
                                        </tr>
                                        <tr>
                                            <td>61555e0b1e08a959cd3f4d92</td>
                                            <td>大话西游之大圣娶亲 西遊記大結局之仙履奇緣</td>
                                            <td> 周星驰 / 吴孟达 / 朱茵</td>
                                            <td>1995-02-04(中国香港) 2014-10-24(中国大陆) 2017-04-13(中国大陆重映)</td>
                                            <td>刘镇伟</td>
                                            <td><img width="100" src="assets/p2455050536.jpg"></td>
                                            <td>喜剧</td>
                                            <td>
                                                <a href="#MoviesUpdate">修改</a>
                                                <a href="">删除</a>
                                            </td>                                    
                                        </tr>

                                    </tbody>
                                </table>
                               
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增电影 -->
                <div class="section-content form-content" id="MoviesAdd">
                    <h2>新增电影</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>电影名称：</label>
                                        <input class="form-input" type="text" id="addMoviesName">
                                    </div>
                                    <div class="content-row">
                                        <label>电影演员：</label>
                                        <input class="form-input" type="text" id="addMoviesActors">
                                    </div>
                                    <div class="content-row">
                                        <label>上映时间：</label>
                                        <input class="form-input" type="text" id="addMoviesTime">
                                    </div>
                                    <div class="content-row">
                                        <label>电影评分：</label>
                                        <input class="form-input" type="text" id="addMoviesScore">
                                    </div>
                                    
                                    <div class="content-row">
                                        <label>电影导演：</label>
                                        <select class="form-input">
                                            <option value="">刘镇伟</option>
                                            <option value="">周星星</option>
                                            <option value="">大卫</option>
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>电影类型：</label>
                                        <select class="form-input">
                                            <option value="">喜剧</option>
                                            <option value="">动作</option>
                                            <option value="">爱情</option>
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>上传电影宣传图片：</label>
                                        <input type="file">
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addMoviesBtn">确认新增</button>
                                    </div>
                                </div>
                                <!-- 照片预览区域 -->
                                <div class="right-info">
                                    <div class="image-frame">
                                        <img src="./images/default.jpeg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 修改电影 -->
                <div class="section-content form-content" id="MoviesUpdate">
                    <h2>修改电影</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>修改数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>电影名称：</label>
                                        <input class="form-input" type="text" id="addMoviesName">
                                    </div>
                                    <div class="content-row">
                                        <label>电影演员：</label>
                                        <input class="form-input" type="text" id="addMoviesActors">
                                    </div>
                                    <div class="content-row">
                                        <label>上映时间：</label>
                                        <input class="form-input" type="text" id="addMoviesTime">
                                    </div>
                                    <div class="content-row">
                                        <label>电影评分：</label>
                                        <input class="form-input" type="text" id="addMoviesScore">
                                    </div>
                                    
                                    <div class="content-row">
                                        <label>电影导演：</label>
                                        <select class="form-input">
                                            <option value="">刘镇伟</option>
                                            <option value="">周星星</option>
                                            <option value="">大卫</option>
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>电影类型：</label>
                                        <select class="form-input">
                                            <option value="">喜剧</option>
                                            <option value="">动作</option>
                                            <option value="">爱情</option>
                                        </select>
                                    </div>
                                    <div class="content-row">
                                        <label>上传电影宣传图片：</label>
                                        <input type="file">
                                    </div>
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addMoviesBtn">确认修改</button>
                                    </div>
                                </div>
                                <!-- 照片预览区域 -->
                                <div class="right-info">
                                    <div class="image-frame">
                                        <img src="./images/default.jpeg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增导演 -->
                <div class="section-content form-content" id="classesAdd">
                    <h2>新增导演</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>导演名称：</label>
                                        <input class="form-input" type="text" id="addClassesName">
                                    </div>                                   
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addClassesBtn">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 导演列表 -->
                <div class="section-content" id="classesList">
                    <h2>导演信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>导演数据</h3>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>导演编号</th>
                                            <th>导演名称</th>
                                           
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="classesTb">
                                        <tr>
                                            <td>6155619c1e08a959cd3f4da5</td>
                                            <td>刘镇伟</td>
                                            <td>
                                                
                                                <a href="">删除</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>6155619c1e08a959cd3f4da5</td>
                                            <td>刘镇伟</td>
                                            <td>
                                                
                                                <a href="">删除</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>6155619c1e08a959cd3f4da5</td>
                                            <td>刘镇伟</td>
                                            <td>
                                                
                                                <a href="">删除</a>
                                            </td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新增电影类型 -->
                <div class="section-content form-content" id="headTeachersAdd">
                    <h2>新增电影类型</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>电影类型名称：</label>
                                        <input class="form-input" type="text" id="addHeadTeachersName">
                                    </div>
                                    
                                    
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addHeadTeachersBtn">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 电影类型列表 -->
                <div class="section-content" id="headTeachersList">
                    <h2>电影类型信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>电影类型数据</h3>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>类型编号</th>
                                            <th>类型名称</th>
                                           
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="classesTb">
                                        <tr>
                                            <td>155619c1e08a959cd3f4da5</td>
                                            <td>喜剧</td>
                                            <td>
                                                <a href="">删除</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新增演员 -->
                <div class="section-content form-content" id="headActorsAdd">
                    <h2>新增演员</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>新增数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>演员名称：</label>
                                        <input class="form-input" type="text" id="addHeadActorsName">
                                    </div>
                                    
                                    
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addHeadActorsBtn">确认新增</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 关联电影 -->
                <div class="section-content form-content" id="headActorsAddMovie">
                    <h2>关联电影</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>关联数据</h3>
                            <div>
                                <div>
                                    <div class="content-row">
                                        <label>电影列表：</label> <br>
                                        <input class="form-input" type="checkbox" checked data-id="61555e0b1e08a959cd3f4d92"/>大话西游 <br>
                                        <input class="form-input" type="checkbox" data-id="61555e441e08a959cd3f4d93"/>哈利波特 <br>
                                        <input class="form-input" type="checkbox" data-id="61555e971e08a959cd3f4d95"/>当幸福来敲门 <br>
                                        <input class="form-input" type="checkbox" data-id="61555ea61e08a959cd3f4d96"checked/>星际穿越
                                    </div>
                                    
                                    
                                    <div class="content-row" style="margin-top: 50px;">
                                        <label></label>
                                        <button class="blue" id="addHeadActorsBtn">确认关联</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 演员列表 -->
                <div class="section-content" id="headActorsList">
                    <h2>演员列表信息</h2>
                    <div class="content">
                        <div class="content-info">
                            <h3>演员列表数据</h3>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>演员编号</th>
                                            <th>演员名称</th>
                                            <th>关联电影</th>                                          
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="classesTb">
                                        <tr>
                                            <td>155619c1e08a959cd3f4da5</td>
                                            <td>周星驰</td>
                                            <td>大话西游、大内密探007</td>
                                            <td>
                                                <a href="">删除</a>
                                                <a href="#headActorsAddMovie">关联电影</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
               
            </section>
        </main>
    </div>

    <!-- <script src="./js/jquery.min.js"></script>
    <script src="js/auth.js"></script> -->
    <!-- 左侧菜单点击事件 -->
    <!-- <script src="./js/sidebar.js"></script>
    <script src="./js/index.js"></script>  -->
</body>

</html>